<template>
  <div class="container">
    <el-tabs
      v-if="false"
      v-model="activeName"
      tab-position="left"
      class="tab-pos"
      @tab-click="handleClick">
      <el-tab-pane
        label="全部"
        name="0"/>
      <el-tab-pane
        label="科普攻略"
        name="1"/>
      <el-tab-pane
        label="生存技巧"
        name="2"/>
      <el-tab-pane
        label="游戏更新"
        name="3"/>
      <el-tab-pane
        label="官方公告"
        name="4"/>
      <el-tab-pane
        label="其它"
        name="5"/>
    </el-tabs>
    <el-row
      type="flex"
      justify="start"
      class="essay-container">
      <el-col
        v-for="(item,index) in totalData"
        :span="8"
        :key="index"
        style="padding: 15px">
        <div
          class="card"
          @click="goDetail(item._id)">
          <figure>
            <div
              :style="{backgroundImage:'url(' + domain + item.src + '?x-oss-process=style/width-180' + ')'}"
              class="image"/>
          </figure>
          <div style="padding: 16px">
            <h3
              style="min-height: 49.6px"
              class="muti-line">{{ item.title }}</h3>
            <el-row
              type="flex"
              justify="space-between"
              style="margin-top: 12px">
              <el-col class="grey-font">
                <i class="el-icon-view"/>
                {{ item.views }}</el-col>
              <el-col>
                <p
                  style="text-align: right"
                  class="grey-font single-line"> {{ item.author }}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-pagination
      :total="total"
      :current-page.sync="currentPage"
      background
      layout="prev, pager, next"
      style="margin-bottom: 30px"
      @current-change="getMore"/>
  </div>
</template>

<script>
export default {
  name: 'Essay',
  scrollToTop: true,
  loading: false,
  watchQuery: true, // 观察query是否改变，改变则重新render
  async asyncData({ $axios, query }) {
    let { data, total } = await $axios.$get(`https://fireleaves.cn/article/`, {
      params: {
        pageSize: 9,
        pageNum: query.pageNum ? query.pageNum : 0,
        type: query.type ? query.type : 0
      }
    })
    let temp = data.map(val => {
      return {
        ...val,
        src: val.src.split('.cn/')[1]
        ? val.src.split('.cn/')[1]
        : val.src
      }
    })
    return {
      totalData: temp,
      total
    }
  },
  computed: {
    activeName() {
      return this.$route.query.type ? this.$route.query.type.toString() : '0'
    },
    currentPage: {
      get() {
        return this.$route.query.pageNum
          ? parseInt(this.$route.query.pageNum, 10) + 1
          : 0
      },
      set() {}
    }
  },
  methods: {
    /**
     * TODO 按类别分类，后端传的total有问题，暂时先不加
     * @param tab
     */
    handleClick(tab) {
      this.$router.push({
        path: '/essay',
        query: {
          type: parseInt(tab.name, 10),
          pageNum: 0
        }
      })
    },
    getMore(pageNum) {
      this.currentPage = pageNum
      this.$router.push({
        path: '/essay',
        query: {
          // type: parseInt(this.activeName, 10),
          pageNum: pageNum - 1
        }
      })
    },
    goDetail(id) {
      this.$router.push({
        path: '/essay/detail',
        query: {
          id
        }
      })
    }
  },
  head() {
    return this.$seo("掌上饥荒-饥荒攻略", "饥荒攻略、实时资讯尽在掌上饥荒。","掌上饥荒,饥荒攻略,SW攻略,DST攻略,Hamlet攻略,饥荒资讯,饥荒代码");
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  background-color: rgb(248, 249, 250);
}

.tab-pos {
  position: absolute;
  left: 48px;
  top: 48px;
  z-index: 10;
}

.essay-container {
  flex-wrap: wrap;
  padding: 15px 16px 15px 16px;
  width: 70%;
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
  background-color: #ffffff;
  overflow: hidden;
  cursor: pointer;
  figure {
    width: inherit;
    height: 200px;
    overflow: hidden;
    .image {
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
    }
  }
}
.muti-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grey-font {
  font-size: 12px;
  color: #666666;
}
</style>
